import { Result, Button, Flex, WingBlank, WhiteSpace } from 'antd-mobile'
import { Typography, Divider } from 'antd'
import router from 'umi/router'
import { mapQuery } from '@/utils'
import styles from './index.scss'

const myImg = src => <img src={src} style={{ width: 100, height: 100 }} alt='' />
const { Item } = Flex
const { Title, Paragraph, Text } = Typography

const take = (
  <Paragraph className={styles.desc}>
    尊敬的用户：

    您好，感谢您使用海淀区社保大厅信息发布管理平台。

    您选择的业务事项为<Text mark>"权益业务”及"支付业务'</Text>

    您的排队号码为社保中心本部南区一层ZDZ008 号，您的前方还有38位用户，预计等候时间3分钟，请您关注大厅内相关屏幕提示信息及微信、短信消息提示，及时前往拒台办理。当您不慎错过呼叫信息时，上方二维码是您的排队二维码，可用于排队序列的过号激活，请妥善保管，并前往大厅排队机扫描激活，三次过号将以弃号处理。”等感谢您对我们工作的大力支持与理解！

  </Paragraph>
)

const order = (
  <Paragraph className={styles.desc}>
    尊敬的用户：

    您好，感谢您使用海淀区社保中心微信业务预约平台。

    您选择的业务事项为“2020年7月2日上午的综合业务（登记），选择的地点为：社保中心本部南区一层”；

    请于预约当日及时到业务大厅现场进行号票激活，激活方式为：在海淀社保微信公众号中点击“我的”…………

    请您关注大厅内相关屏幕提示信息及微信、短信消息提示，及时前往业务窗口办理

    当您不慎错过呼叫信息时，上方二维码是您的排队二维码，可用于排队序列的过号激活，请妥善保管，并前往大厅排队机扫描激活，三次过号将以弃号处理。

    感谢您对我们工作的大力支持与理解！

  </Paragraph>
)

const ResultExample = () => {
  const { type } = mapQuery()
  return (
    <div className={styles.result}>
      <Result
        img={myImg('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3164468217,2359493916&fm=11&gp=0.jpg')}
        title={<Title level={4}>已{type === 'take' ? '取号' : '预约'}成功</Title>}
        message={type === 'take' ? take : order}
      />
      <WhiteSpace />
      <WingBlank>
        <Flex>
          <Item><Button type='primary' onClick={() => router.replace('/')}>完成</Button></Item>
          {/* <Item><Button onClick={() => router.replace('/')}>取消</Button></Item> */}
        </Flex>
      </WingBlank>
    </div>
  )
}

export default ResultExample
